<% pie_total = chart_attrs[:legends].values.sum %>
<div id="<%= page_id %>container"></div>
    <script type="text/javascript">

        function secondsTimeSpanToHMS(s) {
          var h = Math.floor(s/3600); //Get whole hours
          s -= h*3600;
          var m = Math.floor(s/60); //Get remaining minutes
          s -= m*60;
          return h+":"+(m < 10 ? '0'+m : m)+":"+(s < 10 ? '0'+s : s); //zero padding on minutes and seconds
        }

        $(function () {
        $('#<%= page_id %>container').highcharts({
            credits: false,
            chart: {
              plotBackgroundColor: null,
              plotBorderWidth: null,
              plotShadow: false
            },
            title: {
                text: '<%= chart_attrs[:title] %>'
            },
            tooltip: {
              formatter: function () {
                return this.point.name + ' ' + secondsTimeSpanToHMS(this.point.y);
              }
            },
            plotOptions: {
                pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                  enabled: true,
                  color: '#000000',
                  connectorColor: '#000000',
                  formatter: function () {
                    return this.point.name
                  }
                }
              }
            },
            series: [{
                type: 'pie',
                name: '<%= chart_attrs[:labelname].to_s %>',
                data: [
                    <% chart_attrs[:legends].each do |label,value| %>
                        ['<%= label %>',<%= value %>],
                    <% end %>
                ]
        }]
    });
    });
</script>
